﻿<template>
    <dv-border-box-11 title="本体关系">
      <div id="chart-container">
        <canvas id="chart-canvas"></canvas>
      </div>
    </dv-border-box-11>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'

axios.defaults.baseURL = '/api'

window.onresize = function () {
  let myChart = echarts.init(document.getElementById("chart-canvas"))
  myChart.resize()
}

export default {
  data() {
    return {
      graph: {
        nodes: [],
        links: [],
        categories: []
      }
    }
  },
  methods: {
    initChart() {
      // 创建 ECharts 实例
      const chartDom = document.getElementById('chart-container');
      const myChart = echarts.init(chartDom);
      myChart.showLoading();
      // 使用配置选项来设置图表
      axios.get('/ontology/query', {
        params: {
          type: 'entity'
        }
      }).then(
          response => {
            this.graph = JSON.parse(response.data);
            this.graph.nodes.forEach(function (node) {
              node.label = {
                show: node.symbolSize > 20
              };
            });
            var options = {
              title: {
                text: '本体关系',
                subtext: '默认布局',
                top: 'bottom',
                left: 'right'
              },
              legend: [{
                // selectedMode: 'single',
                data: this.graph.categories.map(function (a) {
                  return a.name;
                }),
                textStyle: {
                  color: '#ffffff'
                }
              }],
              darkMode: "true",
              colorBy: "series",
              textStyle: {
                fontSize: 16
              },
              color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
              gradientColor: ['#f6efa6', '#d88273', '#d88273', '#bf444c'],
              animation: 'auto',
              animationEasing: 'cubicInOut',
              useUTC: false,
              selectedMode: true,
              selector: false,
              series: [
                {
                  name: '本体关系',
                  type: 'graph',
                  legendHoverLink: true,
                  layout: 'none',
                  data: this.graph.nodes,
                  links: this.graph.links,
                  categories: this.graph.categories,
                  roam: true,
                  zoom: 1,
                  nodeScaleRatio: 0.6,
                  label: {
                    position: 'right',
                    formatter: '{b}'
                  },
                  lineStyle: {
                    color: 'source',
                    curveness: 0.3
                  },
                  emphasis: {
                    disable: false,
                    focus: 'adjacency',
                    lineStyle: {
                      width: 10
                    },
                    scale: true,
                    label: {
                      show: true
                    },
                  }
                }
              ],
              tooltip: {
                show: true,
                showContent: true,
                triggerOn: 'mousemove | click',
                alwaysShowContent: false,
                displayMode: 'single',
                renderMode: 'auto',
                trigger: 'item', // 触发类型，'item' 表示数据项图形触发
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                formatter: function (params) {
                  // params 是包含当前数据信息的对象
                  var tdata = params.data || {};
                  if (params.dataType === 'edge') {
                    return tdata.source_l + ' > ' + tdata.target_l;
                  } else if (params.dataType === 'node') {
                    return tdata.name + ' : ' + tdata.value;
                  }
                }
              },
            }
            myChart.hideLoading();
            myChart.resize()
            myChart.setOption(options);
          },
          // 失败
          error => {
            console.log('请求失败了', error.message);
          })
      // 监听拓扑关系图节点的点击事件
      myChart.on('click', function (params) {
        // 事件触发时，params包含了当前点击的节点信息
        if (params.dataType === 'node') {
          // 如果点击的是节点，执行相应的逻辑
          console.log('Node clicked:', params.data);
        }
      });
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

<style scoped lang="scss">
#chart-container {
  display: flex;
  position: relative;
  width: 900px;
  height: 800px;
  padding: 0px;
  margin: 0px;
  top: 60px;
  left: 15px;
  user-select: none;
  overflow: hidden;
  align-content: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>